<template>
  <div class="detail">
    <DetailHeaderVue :title="playlist.name"></DetailHeaderVue>
    <DetailTopVue :path="playlist.coverImgUrl" ref="top"></DetailTopVue>
    <div class="bottom">
    <ScrollViewVue ref="scrollview">
        <DetailbottomVue :playlist="playlist.tracks"></DetailbottomVue>
    </ScrollViewVue>
    </div>
  </div>
</template>

<script>
import DetailHeaderVue from '../components/Detail/DetailHeader.vue'
import DetailTopVue from '../components/Detail/DetailTop.vue'
import DetailbottomVue from '../components/Detail/DetailBottom.vue'
import ScrollViewVue from '../components/ScrollView.vue'
import {getPlayList,getAlbum,getArtistsSongs} from '../api/index'
export default {
  name: 'Detail',
  data() {
      return {
          playlist:{}
      }
  },
  components:{
      DetailHeaderVue,
      DetailTopVue,
      DetailbottomVue,
      ScrollViewVue
  },
  created() {
    // console.log(this.$route.params.type);
    if(this.$route.params.type === 'personalized'){
    getPlayList(this.$route.params.id)
    .then((data)=>{
        // console.log(data);
        this.playlist = data.playlist
    })
    .catch((err)=>{
        console.log(err);
    })
    }else if(this.$route.params.type === 'rank'){
      getPlayList(this.$route.params.id)
    .then((data)=>{
      console.log(data);
        this.playlist = data.playlist
    })
    .catch((err)=>{
        console.log(err);
    })
    }
    else if(this.$route.params.type === 'albums'){
      getAlbum({id:this.$route.params.id})
      .then(data=>{
        // console.log(data);
        this.playlist = {
          name:data.album.name,
          coverImgUrl:data.album.picUrl,
          tracks:data.songs
        }
      })
      .catch(err=>{
        console.log(err);
      })
    }else if(this.$route.params.type === 'singer'){
      getArtistsSongs({id:this.$route.params.id})
      .then(data=>{
        // console.log(data);
        this.playlist = {
          name:data.artist.name,
          coverImgUrl:data.artist.picUrl,
          tracks:data.hotSongs
        }
      })
      .catch(err=>{
        console.log(err);
      })
    }
  },
  mounted(){
      // 获取组件对应元素的高度 $el可以获取到组件的根元素
      let defaultHeight = this.$refs.top.$el.offsetHeight
    //   console.log(defaultHeight);
    // 这里调用了ScrollView中的scrolling(fn)方法，传入一个函数给它，将它返回的实参数据传递到这里的y为形参
      this.$refs.scrollview.scrolling((y)=>{
        //   console.log(y);
        if(y < 0){
            // console.log("向上滚动");
            // let scale = 10 * Math.abs(y) / defaultHeight
            // console.log(scale);
            // 用CSS3的filter(滤镜)属性来设置模糊度(blur)
            // this.$refs.top.$el.style.filter = `blur(${scale}px)`

            let scale = Math.abs(y) / defaultHeight
            this.$refs.top.changeMask(scale)
        }else{
            // console.log("向下滚动");
            let scale = 1 + y / defaultHeight
            // console.log(scalc);
            this.$refs.top.$el.style.transform = `scale(${scale})`
        }
      })
  }
}
</script>

<style scoped lang="scss">
@import '../assets/css/variable.scss';
@import '../assets/css/mixin.scss';
.detail{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    @include bg_sub_color();
    //  background-color: red;
    //  z-index: 999; 
    .bottom{
    position: fixed;
    top: 500px;
    left: 0;
    right: 0;
    bottom: 0;
    }
}
</style>
